<template>
  <uv-tabbar :value="value">
    <uv-tabbar-item text="首页" @tap="gotoUrl('index')">
      <template #active-icon>
        <image class="icon" src="/static/tabbar/index_active.png"></image>
      </template>
      <template #inactive-icon>
        <image class="icon" src="/static/tabbar/index.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="已购" @tap="gotoUrlBack('purchased')">
      <template #active-icon>
        <image class="icon" src="/static/tabbar/order_active.png"></image>
      </template>
      <template #inactive-icon>
        <image class="icon" src="/static/tabbar/order.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="学习中心" @tap="gotoUrlBack('learning')">
      <template #active-icon>
        <image class="icon" src="/static/tabbar/lvling_active.png"></image>
      </template>
      <template #inactive-icon>
        <image class="icon" src="/static/tabbar/lvling.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="线下活动" @tap="gotoUrl('offlineCourse')">
      <template #active-icon>
        <image class="icon" src="/static/tabbar/xianxia_active.png"></image>
      </template>
      <template #inactive-icon>
        <image class="icon" src="/static/tabbar/xianxia.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="我的" @tap="gotoUrl('mine')">
      <template #active-icon>
        <image class="icon" src="/static/tabbar/my_active.png"></image>
      </template>
      <template #inactive-icon>
        <image class="icon" src="/static/tabbar/my.png"></image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>

<script lang="ts" setup>
  const props = defineProps({
    value: Number
  })
  const gotoUrl = (url : string) => {
    uni.reLaunch({
      url: `/pages/tabbar/${url}/${url}`
    })
  }
  const gotoUrlBack = (url : string) => {
    uni.navigateTo({
      url: `/pages/tabbar/${url}/${url}`
    })
  }
</script>

<style scoped lang="less">
  .icon {
    width: 48rpx;
    height: 48rpx;

  }
</style>